<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="lz-tips">
        <label>
          开始时间:
        </label>
      </div>
      <el-date-picker
        v-model="startRmarkTime"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间"
        default-time="00:00:00"
        @change="search()"
        :picker-options="pickerOptions1"
      >
      </el-date-picker>
      <div class="lz-tips">
        <label>
          结束时间:
        </label>
      </div>
      <el-date-picker
        v-model="endRmarkTime"
        type="datetime"
        format="yyyy-MM-dd HH:mm:ss"
        value-format="yyyy-MM-dd HH:mm:ss"
        placeholder="选择日期时间"
        default-time="23:59:59"
        @change="search()"
      >
      </el-date-picker>
    </div>
    <div>
      <el-table
        border
        v-loading="tableloading"
        :data="allRmarkData"
      >
        <el-table-column
          prop="createTime"
          :formatter="formatterTime"
          label="跟进时间"
          width="100"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="userId"
          label="用户ID"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="reason"
          label="沟通原因"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          label="沟通内容"
          align="center"
          width="500"
        >
        </el-table-column>
        <el-table-column
          label="沟通方式"
          align="center"
        >
          <template slot-scope="scope">
            <span v-if="scope.row.source == 1">
              电话反馈
            </span>
            <span v-else-if="scope.row.source == 2">
              APP反馈
            </span>
            <span v-else-if="scope.row.source == 3">
              公众号
            </span>
            <span v-else-if="scope.row.source == 4">
              小红书
            </span>
            <span v-else-if="scope.row.source == 5">
              天猫
            </span>
            <span v-else-if="scope.row.source == 6">
              微信
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="operator"
          label="跟进人"
          align="center"
        >
        </el-table-column>
      </el-table>
      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          v-if="pageshow"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>
<script>
import { fetchAllRmark } from "@/api/table";
import format from "date-format";

export default {
  data() {
    return {
      pickerOptions1: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        }
      },
      count: 0,
      limit: 20,
      currentPage: 1,
      startRmarkTime: "",
      endRmarkTime: "",
      tableloading: false,
      allRmarkData: [],
      pageshow: true
    };
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      this.startRmarkTime = format("yyyy-MM-dd", new Date()) + " 00:00:00";
      this.endRmarkTime = format("yyyy-MM-dd", new Date()) + " 23:59:59";
      this.getAllRmark();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getAllRmark();
    },
    formatterTime(row) {
      if (row.createTime) {
        return format("yyyy-MM-dd hh:mm:ss", new Date(row.createTime));
      } else {
        return "";
      }
    },
    search() {
      this.currentPage = 1;
      this.pageshow = false;
      this.getAllRmark();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    },
    async getAllRmark() {
      this.tableloading = true;
      const allRmark = await fetchAllRmark({
        startTime: this.startRmarkTime,
        endTime: this.endRmarkTime,
        pageSize: this.limit,
        pageNo: this.currentPage
      });
      this.allRmarkData = [];
      this.tableloading = false;
      if (allRmark.data.list !== undefined) {
        this.count = allRmark.data.total;
        allRmark.data.list.forEach(item => {
          const all = {};
          all.createTime = item.createTime;
          all.userId = item.userId;
          all.userName = item.userName;
          all.nickName = item.nickName;
          all.reason = item.reason;
          all.remark = item.remark;
          all.source = item.source;
          all.operator = item.operator;
          this.allRmarkData.push(all);
        });
      }
    }
  }
};
</script>
